@import "../../base.less";

@import "./_var.less";

.@{prefix}-stepper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  padding: @stepper-padding;
  background: @stepper-background-color;
  font-size: @stepper-font-size;
  line-height: @stepper-line-height;

  &__label {
    flex: 1;
    color: @text-level-1-color;
  }

  &__minus,
  &__plus {
    display: inline-block;
    vertical-align: top;
    width: @stepper-button-width;
    height: @stepper-button-height;
    position: relative;

    &::before {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: @stepper-minus-icon-width;
      height: @stepper-icon-height;
      background: @stepper-icon-color;
      transform: translate(-50%, -50%);
    }

    &.@{prefix}-is-disabled {
      &::before,
      &::after {
        background-color: @stepper-icon-color-disabled;
      }
    }
  }

  &__plus {
    &::before {
      width: @stepper-plus-icon-width;
    }

    &::after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: @stepper-icon-height;
      height: @stepper-plus-icon-width;
      background: @stepper-icon-color;
      transform: translate(-50%, -50%);
    }
  }

  &__input {
    display: inline-block;
    width: @stepper-input-width;
    height: @stepper-input-height;
    font-size: @stepper-input-font-size;
    color: @stepper-input-color;
    text-align: center;
    border: 0;
    vertical-align: top;
    background: 0;

    &:disabled {
      color: @stepper-color-disabled;
    }
  }

  &__pure {
    width: auto;
    display: inline-flex;
    .@{prefix}-stepper__minus,
    .@{prefix}-stepper__plus,
    .@{prefix}-stepper__input {
      background-color: @stepper-pure-background-color;
      border: @stepper-pure-border;
    }
    .@{prefix}-stepper__input {
      width: @stepper-pure-input-width;
      margin: @stepper-pure-input-margin;
      font-size: @stepper-pure-input-font-size;
    }
    .@{prefix}-stepper__minus,
    .@{prefix}-stepper__plus {
      &::before {
        width: @stepper-pure-icon-width;
      }
    }
    .@{prefix}-stepper__plus::after {
      height: @stepper-pure-icon-width;
    }
  }
  .@{prefix}-stepper__label {
    white-space: nowrap;
  }

  &.@{prefix}-is-disabled {
    .@{prefix}-stepper__minus,
    .@{prefix}-stepper__plus {
      &::before,
      &::after {
        background-color: @stepper-icon-color-disabled;
      }
    }

    .@{prefix}-stepper__input {
      color: @stepper-color-disabled;
    }
  }
}
